<template>
  <div class="form-setting-group form-common-setting">
    <h4 class="form-common-setting-title">
      <span class="form-common-setting-title-name">{{title}}</span>
      <span class="form-common-setting-title-remind">{{ $t('common.base.formMaxLenthTips', { maxLength: 128 }) }}</span>
    </h4>
    <div class="form-type-text-lang">
      <textarea
        :placeholder="placeHolder"
        rows="3"
        data-prop="placeHolder"
        v-model="field.placeHolder"
        @input="update"
        :maxlength="TitleShowMaxLengthMax"
      ></textarea>
      <base-select-language 
        v-if="isShow"
        :title="title"
        :field="field"
        :is-require="false"
        :defaultOption="{
          formType:'textarea',
        }"
        :maxlength="TitleShowMaxLengthMax"
        defaultFormType="textarea"
        :defaultValue="field.placeHolder"
        :defaultValueLanguage="field.placeHolderLanguage || {}"
        @save="save"
      >
      </base-select-language>
    </div>
  </div>
</template>

<script>
/* config */
import * as config from '@src/component/form/config';
/* props */
import { settingProps } from '@src/component/form/components/props';
import {
  isMultiLangModules,
} from '@src/component/util/multiLang/index';
import { DefaultLang } from '@src/util/languages.js';
import locales, { t } from '@src/locales'
import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage'

export default {
  name: 'form-help-tips',
  props: {
    ...settingProps,
    placeHolder: {
      type: String,
      default: t('common.form.placeHolder.formDes'),
    },
  },
  data() {
    return {
      title: t('common.base.helpTips')
    }
  },
  computed: {
    // 描述信息展示最大数量
    TitleShowMaxLengthMax() {
      return config.FIELD_PLACEHOLER_LENGTH_MAX;
    },
    // 事件表单+回执表单显示多语言配置
    isShow() {
      const isOpenMultiLanguage = getOpenMultiLanguage()
      return (
        isOpenMultiLanguage &&
        isMultiLangModules(this.mode) &&
        this.field.formType !== 'relationCustomer' &&
        this.field.formType !== 'relationProduct'
      );
    },
  },
  methods: {
    update(value) {
      this.$emit('input', value, 'placeHolder');
      // 获取新值后，回填多语言字段
      let data = {}
      if (this.field.placeHolderLanguage) {
        data = {...this.field.placeHolderLanguage, [locales.locale]: value?.target?.value || ''}
      }else{
        data = {...DefaultLang(), [locales.locale]: value?.target?.value || ''}
      }
      this.save(data)
    },
    save(data){
      /**  适配原有逻辑，将数据组合成 实例
      * 具体可查看 .\src\component\form\FormDesign.js 的 input 和 form-title-setting 引用的 @input="updateForDom"
      */

      // 中文数据回填
      if(this.field.placeHolder !== data[locales.locale]){
        this.field.placeHolder = data[locales.locale]
      }

      const event ={
        target: {
          dataset: {
            prop: 'placeHolderLanguage'
          },
          value: data
        }
      }
     this.$emit('input', event);
    }
  },
};
</script>
<style lang="scss" scoped>
.form-type-text-lang {
  display: flex;
  textarea {
    flex: 1;
  }
  p {
    width: 32px;
    height: 32px;
    background: #f5f8fa;
    border-radius: 4px;
    border: 1px solid #cbd6e2;
    text-align: center;
    line-height: 30px;
    margin-left: 8px;
    .iconfont {
      font-size: 18px;
      color: #595959;
    }
  }
}
</style>
